<template>
	<view>
		<view class="banner">
			<image src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221209/07c66951767d4b6db597eecc7e143de0.jpg" mode="widthFix" class="b-cover"></image>
			<view class="b-title">联系我们</view>
		</view>
		<view class="introduce">
			<view class="i-center">
				<view class="ic-title">纺扬网站建设</view>
				<view class="ic-list">
					<view class="icl-box box1">
						<view class="iclb-icon icon1"></view>
						<view class="iclb-title">咨询电话</view>
						<text class="iclb-desc">191-0267-1826</text>
					</view>
					<view class="icl-box box2">
						<view class="iclb-icon icon2"></view>
						<view class="iclb-title">公司邮箱</view>
						<text class="iclb-desc">529317161@qq.com</text>
					</view>
					<view class="icl-box box3">
						<view class="iclb-icon icon3"></view>
						<view class="iclb-title">QQ</view>
						<text class="iclb-desc">529317161</text>
					</view>
					<view class="icl-box">
						<view class="iclb-icon icon4"></view>
						<view class="iclb-title">公司地址</view>
						<text class="iclb-desc">上海市奉贤区金海公路</text>
					</view>
				</view>
			</view>
		</view>
		<view class="notice">填写下面表单，我们会第一时间回复您</view>
		<view class="forms">
			<view class="f-box">
				<view class="fb-row">
					<text class="fbr-label">姓名</text>
					<input type="text" class="input" v-model="formData.fullName" placeholder="请输入您的姓名" />
				</view>
				<view class="fb-row">
					<text class="fbr-label">电话</text>
					<input type="text" maxlength="11" class="input" v-model="formData.phone" placeholder="请输入您的电话" />
				</view>
				<view class="fb-row">
					<text class="fbr-label">需求</text>
					<picker class="input" @change="demandChange" :value="demandIndex" :range="demandArray">{{demandArray[demandIndex]}}</picker>
				</view>
				<view class="fb-row">
					<text class="fbr-label">预算</text>
					<input type="text" class="input" v-model="formData.budget" placeholder="请输入您的预算" />
				</view>
				<view class="fb-row">
					<button class="fbr-save" @click="save" :disabled="saveDisabled" hover-class="none">立即提交</button>
				</view>
			</view>
		</view>
		<Footers></Footers>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					fullName: '',
					phone: '',
					demand: '',
					budget: '',
					pathUrl: '',
					platform: '百度小程序'
				},
				demandArray: ['请选择您的需求', '网站建设', '小程序开发', '竞价托管', '网站优化', '信息流广告投放', '抖音运营'],
				demandIndex: 0,
				saveDisabled: false
			}
		},
		onLoad() {
			let pages = getCurrentPages()
			let pathUrl = pages[pages.length-1]['$page']['fullPath']
			this.formData.pathUrl = pathUrl
		},
		onShow() {
			// 设置TDK
			if (uni.getSystemInfoSync().uniPlatform == 'mp-baidu') {
				swan.setPageInfo({
					title: '联系我们-纺扬网站建设',
					description: '网站建设，seo优化公司哪家好，首选纺扬网站建设（☏:191-0267-1826），我们是专业的小程序建设，网站开发，seo关键词优化，巨量引擎抖音广告代运营公司，致力于为客户创造商业价值，合作共赢。',
					keywords: '上海网站建设,网站设计,网站制作,上海建网站,小程序开发,APP开发,seo关键词优化,巨量引擎广告投放,抖音代运营，seo排名,seo,sem,联系我们,纺扬科技'
				})
			}
		},
		methods: {
			// 选择您的需求
			demandChange(e) {
				this.demandIndex = e.detail.value
				this.formData.demand = this.demandArray[e.detail.value]
			},
			// 立即提交
			async save() {
				if (this.formData.phone == '') {
					this.u.msg('请输入您的电话')
					return false
				}
				if (!/1[3456789]\d{9}/.test(this.formData.phone)) {
					this.u.msg('电话格式有误')
					return false
				}
				this.saveDisabled = true
				let getres = await this.u.http({
					url: this.u.addMessageBoard,
					data: this.formData
				})
				if (getres.code == 200) {
					this.u.modal('', getres.msg)
					this.formData = {
						fullName: '',
						phone: '',
						demand: '',
						budget: '',
						pathUrl: ''
					}
					this.saveDisabled = false
					return false
				}
				this.u.msg(getres.msg)
				this.saveDisabled = false
				return false
			}
		}
	}
</script>

<style lang="less" scoped>
	@import url("@/static/css/color.less");

	.introduce {
		padding: 20rpx 24rpx;
		
		.i-center {
			border: 1rpx solid #f2f2f2;
			padding: 39rpx 0 47rpx;
			
			.ic-title {
				font-size: 36rpx;
				text-align: center;
			}
			
			.ic-list {
				margin-top: 66rpx;
				padding: 0 50rpx;
				display: flex;
				flex-wrap: wrap;
				align-items: stretch;
				
				.icl-box {
					width: 50%;
					box-sizing: border-box;
					padding: 30rpx 0;
					border: 0;
					
					.iclb-icon {
						width: 140rpx;
						height: 140rpx;
						margin: 0 auto;
						border: 1rpx solid @color-blue;
						border-radius: 50%;
						
						&.icon1 {
							background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221110/7d0ee91959e149418af9bf8d9d2f9281.jpg) center / 54rpx no-repeat;
						}
						
						&.icon2 {
							background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221110/2ff6f3a0a21d4a44a3e86243c9cac75c.jpg) center / 64rpx no-repeat;
						}
						
						&.icon3 {
							background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221110/6c7e2244323a424597820fbf89ce413f.jpg) center / 42rpx no-repeat;
						}
						
						&.icon4 {
							background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221110/0d16c08d1e174b39ac4848cf3a1191e1.jpg) center / 56rpx no-repeat;
						}
					}
					
					.iclb-title {
						font-size: 24rpx;
						text-align: center;
						margin-top: 19rpx;
					}
					
					.iclb-desc {
						font-size: 24rpx;
						text-align: center;
						margin-top: 8rpx;
						color: #666;
						display: block;
					}
					
					&.box1 {
						border-right: 1rpx solid #f2f2f2;
						border-bottom: 1rpx solid #f2f2f2;
					}
					
					&.box2 {
						border-bottom: 1rpx solid #f2f2f2;
					}
					
					&.box3 {
						border-right: 1rpx solid #f2f2f2;
					}
				}
			}
		}
	}

	.notice {
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		background-color: #E5F6FF;
		color: @color-blue;
		font-size: 36rpx;
	}
	
	.forms {
		padding: 20rpx 24rpx;
		
		.f-box {
			border: 1rpx solid #f2f2f2;
			
			.fb-row {
				border-bottom: 1rpx solid #f2f2f2;
				display: flex;
				align-items: center;
				height: 98rpx;
				line-height: 98rpx;
				
				.fbr-label {
					width: 108rpx;
					padding: 0 20rpx;
					font-size: 24rpx;
					box-sizing: border-box;
				}
				
				.input {
					flex: 1;
					font-size: 24rpx;
				}
				
				.fbr-save {
					width: 100%;
					height: 98rpx;
					line-height: 98rpx;
					background-color: @color-blue;
					color: #fff;
					font-size: 36rpx;
					border-radius: 0;
					
					&::after {
						content: unset;
					}
				}
				
				&:last-child {
					border-bottom: 0;
				}
			}
		}
	}
</style>
